<template>
	<view>
		<view class="uni-header">
			<uni-stat-breadcrumb class="uni-stat-breadcrumb-on-phone" />
		</view>

		<view class="uni-container">
			<view id="backup_index_app">
				<view class="el-card" style="padding: 10px;">
					<view class="clearfix"
						style="display: flex;align-items: center;margin-bottom: 10px;flex-wrap: wrap;gap: 10px;">
						所有存档 总大小：{{formatFileSize(totalSize)}}
						<view class="top_butn" style="display: flex;gap: 20rpx;">
							<button size="mini" style="color: #00aaff;" @click="getBackupList()" >
								刷新
							</button>
							<button size="mini" style="color: #00aa00;"  @click="upFileFun">
								上传文档
							</button>
							<button size="mini" type="text" @click="seletCbox(item,1)" style="color:#aa00ff">
								全选 / 取消
							</button>
							<button size="mini" style="color: red;" @click="batchDelBackup()" >
								批量删除
							</button>
							
						</view>
						<view class="" style="flex: 1;"></view>
					</view>
					
					<!-- 存档列表 -->
					<view class="el-card cundang_list" v-for="(item ,index) in tableData" :key="index">
						<checkbox :value="item.fileName" :checked="item.typeCk" @click="seletCbox(item.fileName)"/>
						<view class=""style="margin-left: 10rpx;width: 100%;">
							<view class="">
								<text>{{item.fileName}}</text>
							</view>
							<view class="" style="margin: 20rpx 0;">
								<text style="color: #00aaff;margin-right: 20rpx;">{{item.createTime}}</text>
								<text style="color: #00aaff;">{{formatFileSize(item.fileSize)}}</text>
							</view>
							<view class="cundang_list_butn" style="display: flex;gap: 20rpx;">
								<button size="mini" style="color: burlywood;" type="text" @click="rename(item)">
									重命名
								</button>
								<button size="mini" style="color: #00aa00;" type="text" @click="download(item)">
									下载
								</button>
								<button size="mini" type="text" @click="deleteBackup(item)" style="color:red">
									删除
								</button>
								
							</view>
						</view>
						
					</view>	
				</view>
			</view>
		</view>
		
		<view v-if="(item.progress && item.progress !== 100) ||item.progress===0 " class="" 
		style="position: fixed;background-color: #00aaff;width: 600rpx;height: 200rpx;bottom: 0;right: 0;padding: 20rpx;border-radius: 10rpx;box-sizing: border-box;">
			<text style="color: aliceblue;">上传中</text>
			<view class="el-card file-picker__progress" style="margin: 10rpx 0;padding: 20rpx;">
				<view class="" style="margin-bottom: 10rpx;">
					{{item.name}}
				</view>
				<progress class="file-picker__progress-item" :percent="item.progress === -1?0:item.progress" stroke-width="4"
				 :backgroundColor="item.errMsg?'#ff5a5f':'#EBEBEB'" />
			</view>
		</view>
			
	</view>
</template>

<script>
	import store from '@/store';
	export default {
		data() {
			return {
				tableData: [],
				drawer: false,
				fileList: [],
				totalSize: 0,
				selectData: [],
				url: "",
				item:{
					name:"",
					progress:null,
					errMsg:false
				}
			}
		},
		created() {
			const {
				besrurl: teatUrl
			} = store.state.http
			this.url = teatUrl + "/backup/upload";

			this.getBackupList();
		},
		methods: {
			upFileFun() {
				let that = this
				uni.chooseFile({
					count: 1, //默认100
					extension: ['.zip', '.doc'],
					success: function(res) {
						console.log(res);
						that.item.name = res.tempFiles[0].name
						const uploadTask = uni.uploadFile({
							url: that.url, //仅为示例，非真实的接口地址
							filePath: res.tempFilePaths[0],
							name: 'file',
						
							success: (uploadFileRes) => {
								console.log(uploadFileRes.data);
								that.successMessage('上传成功！');
								that.getBackupList()
							}
						});

						uploadTask.onProgressUpdate((res) => {
							that.item.progress = res.progress
							// 测试条件，取消上传任务。
							// if (res.progress > 50) {
							// 	uploadTask.abort();
							// }
						});
					}
				});

			},
			
			getBackupList() {
				this.$http.get("/backup/getBackupList").then((data) => {
					let a = []
					data.data.forEach(item=>{
						a.push({
							typeCk:false,
							...item
						})
					})
					this.tableData = a ? a : [];
					if (this.tableData.length > 0) {
						let total = 0;
						this.tableData.forEach(e => {
							total += e.fileSize;
						})
						this.totalSize = total;
					}
					console.log(this.tableData);
					console.log(this.totalSize);
				})
			},
			rename(val) {
				this.$prompt('新名称', '修改名称', {
					confirmButtonText: '确认',
					cancelButtonText: '取消',
				}).then(({
					value
				}) => {
					this.$http.get("/backup/rename?fileName=" + val.fileName + "&newFileName=" + value).then((
						data) => {
						this.successMessage('保存成功');
						this.getBackupList();
					})
				}).catch(() => {

				});
			},
			download(val) {
				const {
					besrurl: teatUrl
				} = store.state.http
				window.location.href = teatUrl + "/backup/download?fileName=" + val.fileName;

			},
			handleClose(done) {
				this.$confirm('确认关闭？')
					.then(_ => {
						done();
					})
					.catch(_ => {});
			},
			handleSuccess(response, file, fileList) {
				if (response.code === 0) {

				} else {
					this.warningMessage(response.message);
				}
			},
			handleExceed(files, fileList) {
				this.$message.warning('当前限制选择 3 个文件，本次选择了' + files.length);
			},
			beforeRemove(file, fileList) {
				return this.$confirm('确认移除 ' + file.name + ' ？');
			},
			seletCbox(val,all=-1){
				console.log(val);
				if(all==-1){
					this.tableData.forEach(item=>{
						if(item.fileName == val){
							item.typeCk = !item.typeCk
						}
					})
				}else{
					if(this.tableData[0].typeCk){
						this.tableData.forEach(item=>{
							item.typeCk = false
						})
					}else{
						this.tableData.forEach(item=>{
							item.typeCk = true
						})
					}
				}
			},
			deleteBackup(val) {
				let fileNames = [val.fileName];
				this.$confirm('确认删除:' + val.fileName + '?', '提示', {
					confirmButtonText: '确认',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$http.post("/backup/deleteBackup", fileNames).then((data) => {
						this.successMessage('删除成功');
						this.getBackupList();
					})
				}).catch(() => {

				});
			},
			batchDelBackup() {
				let fileNames = [];
				this.tableData.forEach(e => {
					if(e.typeCk){
						fileNames.push(e.fileName);	
					}
				})
				if (fileNames.length <= 0) {
					this.warningMessage('请选择数据')
				} else {
					this.$confirm('确认删除:' + '?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						this.$http.post("/backup/deleteBackup", fileNames).then((data) => {
							this.successMessage('删除成功');
							this.getBackupList();
						})
					}).catch(() => {

					});
				}
			},
			formatFileSize(value) {
				if (null == value || value == '') {
					return "0 Bytes";
				}
				let unitArr = new Array("Bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB");
				let index = 0;
				let srcSize = parseFloat(value);
				index = Math.floor(Math.log(srcSize) / Math.log(1024));
				let size = srcSize / Math.pow(1024, index);
				size = size.toFixed(2); //保留的小数位数
				return size + unitArr[index];
			},
			successMessage(message) {
				this.$message({
					message: message,
					type: 'success'
				});
			},
			warningMessage(message) {
				this.$message({
					message: message,
					type: 'warning'
				});
			},
		}
	}
</script>

<style scoped>
	.my_drawer {
		padding: 10rpx;
	}
	.top_butn>button{
		margin: 0;
	}
	.cundang_list{
		padding: 20rpx;
		margin: 20rpx 0;
		line-height: 20px;
		font-size: 14px;
		display: flex;
		align-items: center;
		box-sizing: border-box;
		width: 100%;
	}
	.cundang_list_butn>button{
		margin: 0;
	}
</style>